<script>
import * as echarts from "echarts";

export default {
    name: "charts1",
    data() {
        return {
            rankData: [],
            data1: [],
            data2: [],
        }
    },
    props: {
        districtCode: String
    },
    watch:{
        districtCode(n,o){
            this.getRankData();
        }
    },
    mounted() {
        this.getRankData();
    },
    methods: {
        getRankData() {
          let count = 0;
            this.$HttpService.get(`/statistics/companyAnnualTripRanking?districtCode=${this.districtCode}`).then((res) => {
                this.rankData = res;
                this.data1 = [];
                this.data2 = [];
                this.rankData.forEach(x => {
                    this.data1.push(x.companyName) //纵坐标
                    this.data2.push(x.num) //横坐标
                })
                this.initCharts()
              res.forEach((x) => {
                count += x.num
              })
              this.$emit('showCharts2Data',count)
            })
        },
        initCharts() {
            let chartDom = document.getElementById('chartTwo');
            let myChart = echarts.init(chartDom);
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '2%',
                    top: '1%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.1]
                },
                yAxis: {
                    type: 'category',
                    data: this.data1,
                },
                series: [
                    {
                        type: 'bar',
                        data: this.data2,
                        itemStyle: {
                            // 设置柱状图的颜色
                            color: '#F8943D '
                        }
                    },
                ]
            }
            option && myChart.setOption(option);
        }
    }
}
</script>

<template>
    <div class="char-out">
        <div class="map-dom" id="chartTwo"></div>
    </div>
</template>

<style scoped>
.char-out {
    padding: 10px;

    .char-tit {
        padding-bottom: 20px;
    }
}

.map-dom {
    width: 400px;
    height: 200px;
}
</style>